<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="root"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${root}/img/favicon.ico">

    <title>Fixed top navbar example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="${root}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${root}/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style type="text/css">
        body {
            min-height: 75rem;
            padding-top: 4.5rem;
        }
    </style>
</head>

<body>

<%@include file="/jsp/nav.jsp" %>
<input type="hidden" id="orgs" value='${orgsJson}'/>
<div class="container">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="${root}/index">首页</a></li>
        <li class="breadcrumb-item">系统管理</li>
        <li class="breadcrumb-item active">用户新增</li>
    </ol>
    <div class="row justify-content-md-center">
        <div class="col-9">
            <form action="${root}/system/user/add" method="post">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" name="username" class="form-control" id="username" placeholder="至少2位的中英文字符">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" name="password" class="form-control" id="password"
                           placeholder="至少6位的字符数字特殊字符">
                </div>
                <div class="form-group">
                    <label for="orgId">所属机构</label>
                    <!-- <ul id="orgTree" class="ztree"></ul>
                    <input type="hidden" name="orgId" class="form-control" id="orgId" placeholder="至少2位的中英文字符"
                           value="0"> -->
                    
                    <select name="orgId" class="form-control" id="orgId">
                    <c:forEach items="${orgs}" var="o">
                    	<option value="${o.id}">${o.name}</option>
                    	<c:forEach items="${o.children}" var="o1">
                    	<option value="${o1.id}">&nbsp;&nbsp;${o1.name}</option>
                    	<c:forEach items="${o1.children}" var="o2">
                    	<option value="${o2.id}">&nbsp;&nbsp;&nbsp;&nbsp;${o2.name}</option>
                    	<c:forEach items="${o2.children}" var="o3">
                    	<option value="${o3.id}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${o3.name}</option>
                    	</c:forEach>
                    	</c:forEach>
                    	</c:forEach>
                    </c:forEach>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>


<!-- Bootstrap core JavaScript
 ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="${root}/js/jquery-3.2.1.min.js"></script>
<script src="${root}/js/popper.min.js"></script>
<script src="${root}/js/bootstrap.min.js"></script>
<script src="${root}/js/jquery.ztree.all.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
-->
<script>
    /* $(function(){
        var treeData = JSON.parse($("#orgs").val());
        var settings = {
            callback: {
                onClick: function(event, id, node){
                    $("#orgId").val(node.id);
                }
            },
            view: {
                expandSpeed:""
            }
        };
        // 构造数
        var zt = $.fn.zTree.init($("#orgTree"), settings, treeData);
        var root = zt.getNodes();

        // 展开根节点
        zt.expandNode(root[0]);
        // 展开第一个子节点下所有节点
        zt.expandNode(root[0].children[0],true,true);
    }); */
</script>
</body>
</html>